CSS-i teksti murdmise ja ülevoolu valdamine: Sügavuti tekstivoo piiride käsitlemisest

Veebidisaini ja -arenduse maailmas on sisu kuningas. Kuid kuningas ilma korraliku troonita on lihtsalt inimene uhkes riietuses. Tekst, mis on veebi peamine sisu vorm, peab olema esitatud elegantselt, selgelt ja kontrollitult. Kuna disainerid nihutavad kujunduse piire keerukate võrgustike, voolavate konteinerite ja dünaamilise sisuga, seisavad arendajad silmitsi korduva väljakutsega: kuidas hallata teksti, kui see ei mahu korralikult oma ettenähtud ruumi? Siin tulebki mängu tekstivoo piiride käsitlemise kunst.

Kontrollimatu tekst võib põhjustada katkiseid kujundusi, loetamatut sisu ja halba kasutajakogemust. See võib konteineritest välja voolata, tekitada ebamugavaid ühesõnalisi ridu (tuntud kui lesed või orvud) või jätta teie kujundusse suuri ja inetuid lünki. Õnneks pakub CSS võimsat ja arenevat tööriistade komplekti taltsutamatu teksti ohjeldamiseks. See juhend on süvitsiminek omadustesse, mis annavad teile täpse kontrolli teksti murdmise, ülevoolu ja selle koostoime üle keerukate kujunditega, mis on mõeldud globaalsele front-end professionaalide auditooriumile.

Me rändame alates fundamentaalsest `overflow` omadusest klassikalise `text-overflow`-ni üherealiseks kärpimiseks, uurime laialdaselt kasutatavat `line-clamp` mitmerealiste kokkuvõtete jaoks ja vaatame tulevikku revolutsioonilise `text-wrap` omadusega. Lõpuks vabaneme ristkülikust ja õpime, kuidas lasta tekstil voolata ümber kohandatud kujundite, tagades, et teie disainid pole mitte ainult funktsionaalsed, vaid ka tõeliselt kaunid.

Lõuendi mõistmine: CSS-i karbimudel ja normaalne voog

Enne kui saame kontrollida, kuidas tekst üle voolab, peame esmalt mõistma piire, mida see austab. CSS-is on iga element ristkülikukujuline kast. See kontseptsioon, tuntud kui CSS-i karbimudel, on veebi kujunduse alus. Tekstisisu voolab oma vanem-elemendi sisukastis, järgides normaalse dokumendivoo reegleid.

Mahutav plokk: Teie teksti piir

Element, mis sisaldab teie teksti – olgu see `div`, `p` või `article` – on selle mahutav plokk. Selle ploki mõõtmed (laius ja kõrgus) määravad ruumi, mille tekst peab hõivama. Vaikimisi, kui tekst jõuab rea lõpu servani (vasakult paremale keeles parem serv), murtakse see uuele reale. See on vaikimisi käitumine, `text-wrap: wrap;`. Probleemid algavad siis, kui teksti maht ületab mahutavas plokis saadaoleva ruumi kas horisontaalselt või vertikaalselt.

`overflow` omadus: esimene kaitseliin

`overflow` omadus on mahutava ploki väravavaht. See määrab, mis peaks juhtuma, kui sisu on mahutamiseks liiga suur. See on põhiomadus, mille peate selgeks saama enne spetsiifilisemate tekstiülevoolu tehnikate käsitlemist.

• `overflow: visible;` (Vaikimisi): See on vaikimisi olek. Sisu ei lõigata ja see renderdatakse väljaspool oma konteineri kasti. See põhjustab sageli teksti ülevoolamist teistele elementidele, luues segase ja katkise kujunduse.
• `overflow: hidden;`: Igasugune sisu, mis ületab kasti piire, lõigatakse ära ja muutub nähtamatuks. Peidetud sisu nägemiseks pole mehhanismi. See on paljude teksti kärpimise tehnikate oluline koostisosa.
• `overflow: scroll;`: Sisu lõigatakse ära, kuid brauser pakub kerimisribasid (nii horisontaalseid kui ka vertikaalseid), et kasutaja saaks vaadata ülejäänud sisu. Kerimisribad on olemas isegi siis, kui sisu mahub ära.
• `overflow: auto;`: See sarnaneb `scroll`-iga, kuid on nutikam. Brauser lisab kerimisribad ainult sellele teljele, kus sisu tegelikult üle voolab. Seda eelistatakse üldiselt `scroll`-ile puhtama kasutajaliidese saavutamiseks.

Kuigi `overflow` haldab konteinerit, ei paku see nüansirikast kontrolli teksti enda üle. See on toores instrument: sa kas näed kõike (ja potentsiaalselt lõhud kujunduse), peidad selle täielikult või paned kerimiskasti. Peenemate lahenduste jaoks vajame spetsiifilisemaid tööriistu.

Klassikaline dilemma: üherealise ülevoolu käsitlemine

Üks levinumaid kasutajaliidese väljakutseid on teksti kuvamine, mis peab piirduma ühe reaga, näiteks kasutajanimi, failinimi või tabeli lahtri sisu. Kui tekst on liiga pikk, ei taha me, et see murduks ja suurendaks elemendi kõrgust. Me tahame selle elegantselt kärpida.

Tutvustame `text-overflow: ellipsis`

Omadus `text-overflow` on loodud just selle stsenaariumi jaoks. See määrab, kuidas kasutajatele märku anda, et sisu on rohkem kui hetkel nähtav. Kõige laialdasemalt kasutatav väärtus on `ellipsis`, mis renderdab kolm punkti ('…'), et tähistada kärpimist.

Kuid ainult `text-overflow: ellipsis;` rakendamine ei tee midagi. See on osa omaduste spetsiifilisest kombinatsioonist, mis peavad koos töötama.

Kolmeosaline retsept kolme punkti jaoks

Ühe tekstirea edukaks kärpimiseks vajate konteineril neid kolme CSS-i omadust:

1. `overflow: hidden;`: Esiteks peate konteinerile ütlema, et see peidaks igasuguse sisu, mis voolab väljapoole selle piire. Ilma selleta voolaks tekst lihtsalt välja ja `text-overflow`'il poleks millegi peale toimida.
2. `white-space: nowrap;`: Järgmisena peate takistama teksti murdumist uuele reale. See sunnib kogu teksti jääma ühele horisontaalsele reale, luues ülevoolu tingimuse, mida `overflow: hidden;` saab seejärel kärpida.
3. `text-overflow: ellipsis;`: Lõpuks, kui ülevool on peidetud ja tekst on ühel real, saate rakendada kolm punkti. Brauser kärbib nüüd teksti ja lisab nähtava rea lõppu '…' märgi.

Näide: kaardi pealkirja kärpimine

            
.card-title {
  width: 250px; /* Tihti on vajalik fikseeritud laius */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
  padding: 10px;
}

            

              
                Copy
              
            
          

Selles näites lõigatakse iga tekst klassiga `.card-title` elemendi sees, mis on pikem kui 250 pikslit, ja kuvatakse kolm punkti. See loob puhta ja ühtlase ilme kasutajaliidese komponentidele, kus ruumi on vähe.

Praktilised kasutusjuhud ja piirangud

See tehnika on ideaalne:

• Tabeli lahtritele pikkade andmejada puhul.
• Navigatsioonimenüü elementidele.
• Erineva pikkusega siltidele või märksõnadele.
• Kasutajate loodud sisu eelvaadetele.

Ühest reast kaugemale: mitmerealise kärpimise kunst

Kuidas näidata blogipostituse või tootekirjelduse eelvaadet, mis on piiratud näiteks kolme reaga ja mille lõpus on kolm punkti? See on palju keerulisem probleem. Pikka aega olid ainsad usaldusväärsed lahendused seotud JavaScriptiga, mis arvutas teksti kõrguse ja kärpis sisu käsitsi. See lähenemine võis olla aeglane, habras ja raskesti ligipääsetav. Õnneks on ilmunud CSS-põhine lahendus.

Veteranide tehnika: `-webkit-line-clamp`

Omadus `line-clamp` on mittestandardne, kuid uskumatult hästi toetatud CSS-i funktsioon, mis võimaldab teil piirata plokk-konteineri sisu kindlaksmääratud arvule ridadele. Kuigi sellel on endiselt `-webkit-` tarnija eesliide, töötab see kõigis suuremates kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge, muutes selle tootmiskindlaks valikuks.

Nagu `text-overflow`, ei tööta ka `line-clamp` eraldi. See nõuab korrektseks toimimiseks spetsiifilist omaduste komplekti.

`line-clamp` meetodi lahtiharutamine

Mitmerealise kärpimise rakendamiseks vajate järgmisi CSS-i reegleid:

1. `display: -webkit-box;`: Peate kasutama flexboxi mudeli vanemat versiooni. See on vajalik, et reapiiramise kontekst töötaks.
2. `-webkit-box-orient: vertical;`: See ütleb `-webkit-box`-ile, et see paigutaks oma lapsed vertikaalselt.
3. `overflow: hidden;`: Nagu ka üherealise kolme punkti puhul, peate peitma sisu, mis konteinerist üle voolab.
4. `-webkit-line-clamp: 3;`: See on võtmeomadus. Täisarvu väärtus (antud juhul `3`) määrab täpse ridade arvu, mida näidatakse enne sisu kärpimist ja kolme punkti lisamist.

Näide: tootekirjelduse eelvaade

            
.product-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Näita 3 rida */
  overflow: hidden;
  text-overflow: ellipsis; /* Tagavara mõnele brauserile */
  max-height: 4.5em; /* Valikuline: tagavara brauseritele, mis ei toeta line-clamp'i. (line-height * ridade arv) */
  line-height: 1.5em;
}

            

              
                Copy
              
            
          

See koodijupp võtab tekstilõigu ja kuvab sellest ainult esimesed kolm rida, millele järgneb kolm punkti. See on puhas, jõudluselt hea ja ainult CSS-i põhine lahendus pikaaegsele probleemile.

Brauseri tugi ja tootmisvalmidus

Vaatamata oma mittestandardsele staatusele on `-webkit-line-clamp` üks enimkasutatud ja usaldusväärsemaid patenteeritud CSS-i funktsioone. Selle rakendamine on ühtlane Blink (Chrome, Edge), WebKit (Safari) ja Gecko (Firefox) mootorites. Võite seda täna julgelt tootmiskeskkondades kasutada.

Tulevik: ametlik `line-clamp` omadus

CSS Overflow Module Level 3 spetsifikatsioon sisaldab ametlikku `line-clamp` omadust ilma tarnija eesliiteta. See on mõeldud olema lihtsam ja otsekohesem omadus. Siiski on standardversiooni brauseriimplementatsioon alles algusjärgus. Praegu jääb `-webkit-` eesliitega versioon tööstusharu standardiks.

Tüpograafia uus ajastu: arenev `text-wrap` omadus

Kui kärpimine seisneb sisu peitmises, siis teksti murdmine on see, kuidas sisu oma nähtavas ruumis voolab. Uus `text-wrap` omadus, mis on osa CSS Text Module Level 4-st, tutvustab võimsaid uusi viise tekstivoo kontrollimiseks parema loetavuse ja esteetika saavutamiseks, eriti pealkirjade ja lühikeste lõikude puhul.

Hüpe loetavuses: `text-wrap: balance`

Kas olete kunagi näinud pealkirja, mis näeb välja selline?

Uute ja võimsate CSS-i
omaduste valdamine

Esimene rida on palju pikem kui teine, luues visuaalselt tasakaalustamata ja ebamugava lugemiskogemuse. `text-wrap: balance` on selle probleemi jaoks mängu muutev lahendus. Kui seda rakendada elemendile, annab see brauserile korralduse tasakaalustada ridade pikkused, luues sümmeetrilisema ja meeldivama tekstiploki.

Brauseri algoritm püüab saavutada midagi sellist:

Uute ja võimsate
CSS-i omaduste valdamine

See lihtne deklaratsioon võib teie tüpograafiat dramaatiliselt parandada. Siiski kaasneb sellega jõudluskulu. Brauser peab tegema arvutusi, et leida optimaalne murdepunkt. Sel põhjusel on `text-wrap: balance` praegu mõeldud ainult tekstiplokkidele, mis on kümme rida või vähem. See on ideaalne:

• Lehe pealkirjadele ja päistele (`h1`, `h2` jne)
• Tsitaatidele (Blockquotes)
• Lühikestele kirjeldavatele lõikudele

Näide: tasakaalustatud pealkiri

            
h1.page-title {
  text-wrap: balance;
}

            

              
                Copy
              
            
          

Leskede ja orbude kaotamine: `text-wrap: pretty`

Teine levinud tüpograafiline ebameeldivus on "orb" – üksik sõna, mis istub üksi lõigu viimasel real. See tekitab katkestuse teksti voos ja jätab inetu tühimiku.

`text-wrap: pretty` on veel üks uus väärtus, mis on loodud selle lahendamiseks. See on peenem kui `balance`. See ei püüa kogu tekstiplokki uuesti tasakaalustada; selle asemel tagab see lihtsalt, et lõigu viimasel real oleks vähemalt kaks sõna. See hoiab ära orvud, tõmmates vajadusel eelmiselt realt ühe sõna alla.

Erinevalt `balance`-ist on `pretty`-l palju madalam jõudluskulu ja seda saab kasutada pikemate tekstide, näiteks tervete artiklite või blogipostituste puhul.

Näide: põhiteksti parandamine

            
article p {
  text-wrap: pretty;
}

            

              
                Copy
              
            
          

Progressiivne täiustamine ja brauserite kasutuselevõtt

2023. aasta lõpu seisuga on `text-wrap: balance` ja `text-wrap: pretty` saadaval kaasaegsetes Chromiumil põhinevates brauserites ja neid rakendatakse ka teistes. See on ideaalne võimalus progressiivseks täiustamiseks. Brauserid, mis seda toetavad, saavad parema tüpograafia, samas kui vanemad brauserid renderdavad teksti lihtsalt nii, nagu nad alati on teinud. Selle tänapäevasel kasutamisel pole mingit kahju.

Kastist välja murdmine: teksti murdmine ümber kohandatud kujundite

Aastakümneid olid veebikujundused piiratud ristkülikutega. Tekst voolas ristkülikukujulistes konteinerites ja pildid olid ristkülikukujulised plokid, mille ümber tekst murdus. `shape-outside` omadus purustab selle piirangu, võimaldades tekstil murduda ümber keerukate, mitteristkülikukujuliste kujundite nagu ringid, ellipsid ja kohandatud polügoonid.

Tutvustame `shape-outside`: võti voolavate kujunduste juurde

`shape-outside` omadust rakendatakse ujuvale elemendile. See määratleb kuju, mille ümber ümbritseva teksti reasisene sisu murdub. Selle asemel, et austada elemendi ristkülikukujulist kasti, voolab tekst sujuvalt mööda teie määratletud kuju kontuure.

Kujundite määratlemine: funktsioonid ja väärtused

`shape-outside` aktsepteerib mitut põhilist kujundifunktsiooni:

• `circle(raadius asukohas)`: Määratleb ringikujulise kuju. Näide: `circle(50% at 50% 50%)` loob ringi, mis täidab elemendi.
• `ellipse(rx ry asukohas)`: Määratleb elliptilise kuju erinevate horisontaalsete ja vertikaalsete raadiustega.
• `inset(ülal paremal all vasakul ümarad nurgad)`: Määratleb ristküliku, mis on elemendi servadest sissepoole nihutatud, valikuliste ümarate nurkadega.
• `polygon(x1 y1, x2 y2, ...)`: Kõige võimsam funktsioon. See võimaldab teil määratleda kohandatud kuju, määrates koordinaatpunktide komplekti.

Piltide kasutamine kujunditena `url()` abil

Võib-olla kõige intuitiivsem viis `shape-outside` kasutamiseks on pildi URL-i andmine. Tekst murdub selle pildi läbipaistmatute osade ümber.

            
.avatar {
  float: left;
  width: 150px;
  height: 150px;
  shape-outside: url('path/to/transparent-avatar.png');
  shape-image-threshold: 0.5; /* Määratleb alfakanali läve */
}

            

              
                Copy
              
            
          

`shape-image-threshold` omadus on siin oluline. See määratleb läbipaistmatuse taseme (0.0 täielikult läbipaistvast kuni 1.0 täielikult läbipaistmatuni), mille juures kuju joonistatakse. Väärtus `0.5` tähendab, et iga piksel, mis on 50% või rohkem läbipaistmatu, on osa kuju piirist.

Peenhäälestus `shape-margin`-iga

Sageli ei taha te, et tekst puudutaks otse kuju. `shape-margin` omadus lisab kuju ümber veerise, lükates teksti eemale, et luua mugavat hingamisruumi.

            
.floated-element {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 1em; /* Lisab 1em veerise ümber ringi */
}

            

              
                Copy
              
            
          

Täielik näide: kasutajaprofiili kaart

Kombineerime need kontseptsioonid, et luua profiil, kus tekst murdub ümber ringikujulise avatari.

            
.profile-card img {
  float: left;
  width: 120px;
  height: 120px;
  border-radius: 50%; /* Muudab pildi visuaalselt ringikujuliseks */
  margin-right: 20px;

  /* Määratle kuju teksti murdmiseks */
  shape-outside: circle(50%);
  shape-margin: 10px;
}

.profile-card .bio {
  text-align: justify;
}

            

              
                Copy
              
            
          

Selles näites ei murdu `bio` tekst enam `img` elemendi ristkülikukujulise kasti ümber. Selle asemel voolab see kaunilt ümber `shape-outside`'iga määratletud ringikujulise kuju, 10px vahega, luues professionaalse, ajakirjaliku kujunduse.

Globaalne perspektiiv: tekstivoog rahvusvahelistes kontekstides

Globaalsele publikule arendades on kriitilise tähtsusega arvestada, kuidas meie disainid kohanduvad erinevate keelte ja kirjutusviisidega. Meie arutatud CSS-i omadused on ehitatud loogilistele, mitte füüsilistele omadustele, mis muudab need rahvusvahelistamiseks robustseks.

Paremalt vasakule (RTL) keeled

Keelte puhul nagu araabia, heebrea või pärsia, mida loetakse paremalt vasakule, käsitleb brauser neid tekstivoo omadusi automaatselt, kui dokumendi suund on õigesti seadistatud (nt `dir="rtl"`).

• `text-overflow: ellipsis;`: RTL-kontekstis ilmub kolm punkti korrektselt tekstikasti vasakule poole, rea lõppu selles lugemissuunas.
• `shape-outside`: Kui ujutate elemendi RTL-kujunduses `paremale`, murdub tekst korrektselt selle ümber vasakul poolel. Kujundifunktsioonid töötavad tekstisuunast sõltumatult.

Vertikaalsed kirjutusviisid

Ida-Aasia keelte jaoks, mida saab kirjutada vertikaalselt (nt jaapani, hiina), pakub CSS omadust `writing-mode` (`writing-mode: vertical-rl;` või `writing-mode: vertical-lr;`).

Kaasaegsed teksti ülevoolu ja kärpimise omadused on loodud töötama nende režiimidega. Näiteks reapiiramine piirab vertikaalseid tekstiveerge horisontaalsete ridade asemel. "Rea" mõiste kohandub kirjutus suunaga, muutes need tööriistad uskumatult mitmekülgseks erinevates kultuurides.

Tundmatu jaoks disainimine: dünaamiline sisu

Globaalses rakenduses ei saa te ennustada tõlgitud sisu pikkust. Nupu silt, mis on inglise keeles 5 tähemärki pikk, võib saksa keeles olla 15. Siin arutatud tekstivoo käsitlemise tehnikad on olulised robustsete komponentide ehitamiseks, mis ei purune, kui need on täidetud erineva pikkusega sisuga. `text-overflow` ja `line-clamp` kasutamine tagab, et teie kasutajaliides jääb järjepidevaks ja puhtaks, olenemata kuvatavast keelest.

Kokkuvõte: võtke oma tekstivoog kontrolli alla

Tekst on veebi süda ja selle esitlus väärib meie suurimat tähelepanu. Vaikimisi käitumisest kaugemale liikudes saame luua kogemusi, mis on loetavamad, esteetiliselt meeldivamad ja vastupidavamad. Oleme näinud, kuidas hallata tekstivoogu igal tasandil:

• Üherealine kontroll: Kasutades kolmikut `overflow: hidden`, `white-space: nowrap` ja `text-overflow: ellipsis` puhaste ja ennustatavate kasutajaliidese elementide jaoks.
• Mitmerealised kokkuvõtted: Rakendades võimsat ja usaldusväärset `-webkit-line-clamp` elegantsete sisu eelvaadete jaoks ilma JavaScriptita.
• Täiustatud tüpograafia: Tulevikku vaadates `text-wrap: balance` kaunite pealkirjade ja `text-wrap: pretty` täiuslikult viimistletud lõikude jaoks.
• Voolavad, orgaanilised kujundused: Ristkülikust vabanemine `shape-outside` abil, et luua dünaamilisi, ajakirjakvaliteediga disaine, kus tekst ja meedia põimuvad.

Mõistes ja rakendades neid CSS-i tehnikaid, varustate end mis tahes tekstiga seotud kujunduse väljakutse lahendamiseks. Saate ehitada liideseid, mis pole mitte ainult funktsionaalsed, vaid ka tüpograafiliselt korrektsed ja globaalselt kohandatavad. Järgmine kord, kui näete teksti halvasti käitumas, teate, et teil on tööriistad selle taltsutamiseks, muutes potentsiaalse kujunduse kaose tahtlikuks ja elegantseks disainiavalduseks.